<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品类目统计</title>
    <!--引人样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div id="app">

    <div class="block">
        <div style="padding-bottom: 10px;margin-top: 10px">
            <span>选择查询的时间段</span>
        </div>
        <el-date-picker
                v-model="date1"
                type="date"
                placeholder="选择日期">
        </el-date-picker>
        <span>至</span>
        <el-date-picker
                v-model="date2"
                type="date"
                placeholder="选择日期">
        </el-date-picker>
        <el-button type="primary" @click="fetchData()">查询</el-button>
    </div>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 700px;height:400px;"></div>


    <el-table
            :data="tableData"
            border
            style="width: 100%;margin-bottom: 50px">
        <el-table-column
                prop="categoryName"
                label="分类名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="num"
                label="销售数量"
                width="180">
        </el-table-column>
        <el-table-column
                label="销售数量比例"
                width="180">
            <template slot-scope="scope">
                <!--toFixed(2)保留两位小数-->
                {{(scope.row.num/totalNum*100).toFixed(0)}}%
            </template>
        </el-table-column>
        <el-table-column
                label="销售金额"
                width="180">
            <template slot-scope="scope">
                ￥{{scope.row.money/100}}
            </template>
        </el-table-column>
        <el-table-column
                label="销售金额比例"
                width="180">
            <template slot-scope="scope">
                {{(scope.row.money/totalMoney*100).toFixed(0)}}%
            </template>
        </el-table-column>
    </el-table>

</div>

</body>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/elementui.js"></script>
<script src="../js/util.js"></script>
<script src="../js/echarts.common.min.js"></script>

<script>
    new Vue({
        el:'#app',
        data(){
            return {
                tableData:[],
                date1:'',//必须为空，即使有默认值，点击查询也没用
                date2:'',//同上
                totalNum:0,
                totalMoney:0


            }
        },
        created(){

        },
        methods:{
            fetchData() {
                let date1 = this.date1.Format("yyyy-MM-dd");//util中自己写的方法
                let date2 = this.date2.Format("yyyy-MM-dd");

                axios.get(`/categoryReport/category1Count.do?date1=${date1}&date2=${date2}`).then(response => {
                    this.tableData = response.data;

                    //统计销售总数量与总金额
                    for(let i=0;i<this.tableData.length;i++){
                        this.totalNum+=this.tableData[i].num;
                        this.totalMoney+=this.tableData[i].money;

                    }


                //创建饼图

                let legendData=[];//图例数据
                let numDate=[];//销售量数据
                let moneyDate=[];//销售额数据

                for(let i=0;i<this.tableData.length;i++){
                    legendData.push(this.tableData[i].categoryName);
                    numDate.push({name:this.tableData[i].categoryName,value:this.tableData[i].num});
                    moneyDate.push({name:this.tableData[i].categoryName,value:this.tableData[i].money});
                }

                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                let option = {
                    title: {
                        text: '商品类目销售分析',
                        subtext: '这是数据展示',
                        left: 'center',
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: legendData,
                    },
                    series: [
                        {
                            name: '销售量',
                            type: 'pie',
                            radius: '35%',
                            center: ['20%', '50%'],
                            data: numDate,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            label:{
                                fontSize: 16
                            }
                        },
                        {
                            name: '销售额',
                            type: 'pie',
                            radius: '35%',
                            center: ['65%', '50%'],
                            data: moneyDate,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            label:{
                                fontSize: 16
                            }
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

                });
            }
        }

    })

</script>
</html>